import React, { Component } from "react";
import { Tabs } from "antd-mobile";
import "./SearchRes.scss";
import axios from "../../utils/myaxios";
import { withRouter } from "react-router-dom";

class SearchRes extends Component {
  state = {
    searchVal: "",
    hotList: [],
    productList: [],
    tabs: [
      { title: "默认" },
      { title: "销量" },
      { title: "价格" },
      { title: "好评" },
      { title: "出版时间" },
    ],
  };
  //搜索框输入
  handleSearchValFocus = (e) => {
    this.props.history.push({
      pathname: "/searchcenter",
      state: { searchname: this.props.match.params.goods_name },
    });
  };
  // 根据点击跳转页面
  handleItemClick = (goods_info) => {
    this.props.history.push({
      pathname: "/goodDetail",
      state: { goods_info: goods_info },
    });
  };
  //热门点击
  handleRemenClick = (text) => {
    //搜索结果
    this.props.history.push("/searchres/" + text);
    this.getPreductAndHot(text);
  };
  componentDidMount() {
    this.getPreductAndHot(this.props.match.params.goods_name);
  }
  getPreductAndHot = (text) => {
    // 搜索结果
    axios
      .get(
        "/search_ajax.php?have_ad=1&act=get_product_flow_search&result_set_all_count=0&has_used_recommend=0&keyword=" +
          encodeURI(text)
      )
      .then((res) => {
        console.log(res);
        let arr = [];
        if (res.hotKeywords) {
          arr = res.hotKeywords.slice(0, 6);
        }
        document.title = res.keyword + " [价格 图片 品牌] -当当触屏版";
        this.setState({
          searchVal: res.keywordStr,
          hotList: arr,
          productList: res.products,
        });
      });
  };
  render() {
    return (
      <div className="ddw-sc">
        {/* 搜索中心输入框开始 */}
        <div className="sc-nav">
          <div className="nav-back">
            <i
              className="iconfont icon-fanhui"
              onClick={() => window.history.go(-1)}
            ></i>
          </div>
          <div className="nav-input">
            <i className="iconfont icon-sousuo"></i>
            <input
              defaultValue={this.state.searchVal}
              onFocus={this.handleSearchValFocus}
              type="search"
              placeholder="搜索商品/店铺/种类"
            />
          </div>
          <div className="nav-search-btn">
            <span>筛选</span>
          </div>
        </div>
        {/* 搜索中心输入框结束 */}
        {/* tab切换栏开始 */}
        <Tabs
          tabs={this.state.tabs}
          initialPage={0}
          tabBarActiveTextColor="red"
          tabBarUnderlineStyle={{
            borderColor: "red",
            border: "0.013333rem solid red",
          }}
          tabBarTextStyle={{ fontWeight: "200", color: "black" }}
        >
          <div className="sc-moren">
            {/* 热门开始 */}
            <div className="sc-remeng">
              <h4>
                <span>您是不是要找:</span>
              </h4>
              <div className="remeng">
                {this.state.hotList &&
                  this.state.hotList.map((v) => {
                    return (
                      <span
                        key={v}
                        onClick={this.handleRemenClick.bind(this, v)}
                      >
                        {v}
                      </span>
                    );
                  })}
              </div>
            </div>
            {/* 热门结束 */}
            {/* 搜索默认内容开始 */}
            {/* 搜索默认内容结束 */}
            <div className="sc-main">
              {this.state.productList &&
                this.state.productList.map((v) => {
                  return (
                    <div
                      onClick={this.handleItemClick.bind(this, v)}
                      className="sc-main-item"
                      key={v.id}
                    >
                      <div className="item-left">
                        <img src={v.image_url} alt="" />
                      </div>
                      <div className="item-right">
                        <div className="item-title">{v.name}</div>
                        <div className="item-name">{v.authorname}</div>
                        <div className="item-biaozhi">
                          {v.product_tags &&
                            v.product_tags.map((vv) => {
                              return <span key={vv.name}>{vv.name}</span>;
                            })}
                        </div>
                        <div className="item-price">
                          <span>￥{v.price}</span>
                          <s>{v.original_price}</s>
                          <em>{v.score}折</em>
                        </div>
                        {v.ebook_dd_price ? (
                          <div className="item-banben">
                            <i className="iconfont icon-dianzishu"></i>
                            电子书版 ￥ {v.ebook_dd_price}
                          </div>
                        ) : (
                          ""
                        )}
                        <div className="item-haopin">
                          100.0好评({v.total_review_count}人)
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
          <div className="sc-moren">
            {/* 热门开始 */}
            <div className="sc-remeng">
              <h4>
                <span>您是不是要找:</span>
              </h4>
              <div className="remeng">
                {this.state.hotList &&
                  this.state.hotList.map((v) => {
                    return (
                      <span
                        key={v}
                        onClick={this.handleRemenClick.bind(this, v)}
                      >
                        {v}
                      </span>
                    );
                  })}
              </div>
            </div>
            {/* 热门结束 */}
            {/* 搜索默认内容开始 */}
            {/* 搜索默认内容结束 */}
            <div className="sc-main">
              {this.state.productList &&
                this.state.productList.map((v) => {
                  return (
                    <div
                      onClick={this.handleItemClick.bind(this, v)}
                      className="sc-main-item"
                      key={v.id}
                    >
                      <div className="item-left">
                        <img src={v.image_url} alt="" />
                      </div>
                      <div className="item-right">
                        <div className="item-title">{v.name}</div>
                        <div className="item-name">{v.authorname}</div>
                        <div className="item-biaozhi">
                          {v.product_tags &&
                            v.product_tags.map((vv) => {
                              return <span key={vv.name}>{vv.name}</span>;
                            })}
                        </div>
                        <div className="item-price">
                          <span>￥{v.price}</span>
                          <s>{v.original_price}</s>
                          <em>{v.score}折</em>
                        </div>
                        {v.ebook_dd_price ? (
                          <div className="item-banben">
                            <i className="iconfont icon-dianzishu"></i>
                            电子书版 ￥ {v.ebook_dd_price}
                          </div>
                        ) : (
                          ""
                        )}
                        <div className="item-haopin">
                          100.0好评({v.total_review_count}人)
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
          <div className="sc-moren">
            {/* 热门开始 */}
            <div className="sc-remeng">
              <h4>
                <span>您是不是要找:</span>
              </h4>
              <div className="remeng">
                {this.state.hotList &&
                  this.state.hotList.map((v) => {
                    return (
                      <span
                        key={v}
                        onClick={this.handleRemenClick.bind(this, v)}
                      >
                        {v}
                      </span>
                    );
                  })}
              </div>
            </div>
            {/* 热门结束 */}
            {/* 搜索默认内容开始 */}
            {/* 搜索默认内容结束 */}
            <div className="sc-main">
              {this.state.productList &&
                this.state.productList.map((v) => {
                  return (
                    <div
                      onClick={this.handleItemClick.bind(this, v)}
                      className="sc-main-item"
                      key={v.id}
                    >
                      <div className="item-left">
                        <img src={v.image_url} alt="" />
                      </div>
                      <div className="item-right">
                        <div className="item-title">{v.name}</div>
                        <div className="item-name">{v.authorname}</div>
                        <div className="item-biaozhi">
                          {v.product_tags &&
                            v.product_tags.map((vv) => {
                              return <span key={vv.name}>{vv.name}</span>;
                            })}
                        </div>
                        <div className="item-price">
                          <span>￥{v.price}</span>
                          <s>{v.original_price}</s>
                          <em>{v.score}折</em>
                        </div>
                        {v.ebook_dd_price ? (
                          <div className="item-banben">
                            <i className="iconfont icon-dianzishu"></i>
                            电子书版 ￥ {v.ebook_dd_price}
                          </div>
                        ) : (
                          ""
                        )}
                        <div className="item-haopin">
                          100.0好评({v.total_review_count}人)
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>

          <div className="sc-moren">
            {/* 热门开始 */}
            <div className="sc-remeng">
              <h4>
                <span>您是不是要找:</span>
              </h4>
              <div className="remeng">
                {this.state.hotList &&
                  this.state.hotList.map((v) => {
                    return (
                      <span
                        key={v}
                        onClick={this.handleRemenClick.bind(this, v)}
                      >
                        {v}
                      </span>
                    );
                  })}
              </div>
            </div>
            {/* 热门结束 */}
            {/* 搜索默认内容开始 */}
            {/* 搜索默认内容结束 */}
            <div className="sc-main">
              {this.state.productList &&
                this.state.productList.map((v) => {
                  return (
                    <div
                      onClick={this.handleItemClick.bind(this, v)}
                      className="sc-main-item"
                      key={v.id}
                    >
                      <div className="item-left">
                        <img src={v.image_url} alt="" />
                      </div>
                      <div className="item-right">
                        <div className="item-title">{v.name}</div>
                        <div className="item-name">{v.authorname}</div>
                        <div className="item-biaozhi">
                          {v.product_tags &&
                            v.product_tags.map((vv) => {
                              return <span key={vv.name}>{vv.name}</span>;
                            })}
                        </div>
                        <div className="item-price">
                          <span>￥{v.price}</span>
                          <s>{v.original_price}</s>
                          <em>{v.score}折</em>
                        </div>
                        {v.ebook_dd_price ? (
                          <div className="item-banben">
                            <i className="iconfont icon-dianzishu"></i>
                            电子书版 ￥ {v.ebook_dd_price}
                          </div>
                        ) : (
                          ""
                        )}
                        <div className="item-haopin">
                          100.0好评({v.total_review_count}人)
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>

          <div className="sc-moren">
            {/* 热门开始 */}
            <div className="sc-remeng">
              <h4>
                <span>您是不是要找:</span>
              </h4>
              <div className="remeng">
                {this.state.hotList &&
                  this.state.hotList.map((v) => {
                    return (
                      <span
                        key={v}
                        onClick={this.handleRemenClick.bind(this, v)}
                      >
                        {v}
                      </span>
                    );
                  })}
              </div>
            </div>
            {/* 热门结束 */}
            {/* 搜索默认内容开始 */}
            {/* 搜索默认内容结束 */}
            <div className="sc-main">
              {this.state.productList &&
                this.state.productList.map((v) => {
                  return (
                    <div
                      onClick={this.handleItemClick.bind(this, v)}
                      className="sc-main-item"
                      key={v.id}
                    >
                      <div className="item-left">
                        <img src={v.image_url} alt="" />
                      </div>
                      <div className="item-right">
                        <div className="item-title">{v.name}</div>
                        <div className="item-name">{v.authorname}</div>
                        <div className="item-biaozhi">
                          {v.product_tags &&
                            v.product_tags.map((vv) => {
                              return <span key={vv.name}>{vv.name}</span>;
                            })}
                        </div>
                        <div className="item-price">
                          <span>￥{v.price}</span>
                          <s>{v.original_price}</s>
                          <em>{v.score}折</em>
                        </div>
                        {v.ebook_dd_price ? (
                          <div className="item-banben">
                            <i className="iconfont icon-dianzishu"></i>
                            电子书版 ￥ {v.ebook_dd_price}
                          </div>
                        ) : (
                          ""
                        )}
                        <div className="item-haopin">
                          100.0好评({v.total_review_count}人)
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
        </Tabs>
        {/* tab切换栏结束 */}
      </div>
    );
  }
}

export default withRouter(SearchRes);
